{% extends "base.html" %}

{% block title %}首页 - 云水禅心居{% endblock %}

{% block extra_head %}
<style>
    .page-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem 1rem 1rem;  /* 调整顶部padding */
        position: relative;  /* 为访问量卡片定位添加相对定位 */
    }
    
    /* 访问量卡片样式 */
    .visitor-stats-card {
        width: 120px;
        height: 120px;
        background: rgb(103, 225, 255);
        transition: all 0.4s ease;  /* 添加ease缓动效果 */
        border-radius: 10px;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);  /* 更柔和的阴影 */
        font-size: 16px;
        font-weight: 900;
        position: absolute;  /* 改为绝对定位，随页面滚动 */
        left: -21.5rem;       /* 向左移动，使用负值让卡片部分超出容器 */
        top: 0rem;           /* 距离顶部边距 */
        z-index: 10;         /* 降低z-index */
    }

    .visitor-stats-card:hover {
        border-radius: 15px;
        cursor: pointer;
        transform: scale(1.1);  /* 只保留缩放效果 */
        box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);  /* 悬浮时阴影更明显 */
        background: rgb(103, 151, 255);
    }

    .first-content {
        height: 100%;
        width: 100%;
        transition: all 0.4s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 1;
        border-radius: 15px;
    }

    .visitor-stats-card:hover .first-content {
        height: 0px;
        opacity: 0;
    }
    
    .first-content .stat-number {
        font-size: 2.2rem;
        margin-bottom: 0.3rem;
        color: #000;
    }
    
    .first-content .stat-label {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
    }

    .second-content {
        height: 0%;
        width: 100%;
        opacity: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        transition: all 0.4s;
        font-size: 0px;
        transform: rotate(90deg) scale(-1);
    }
    
    .second-content .stat-number {
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
        color: #000;
    }
    
    .second-content .stat-label {
        font-size: 0.8rem;
        font-weight: 400;
        color: #333;
    }

    .visitor-stats-card:hover .second-content {
        opacity: 1;
        height: 100%;
        transform: rotate(0deg);
    }
    
    /* 深色模式下的卡片颜色 */
    html[data-theme='dark'] .visitor-stats-card {
        background: rgb(70, 150, 180);
    }
    
    html[data-theme='dark'] .visitor-stats-card:hover {
        background: rgb(70, 100, 180);
    }
    
    .page-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    /* 大型舞台灯效果标题区域 - 气泡卡片样式 */
    .hero-section {
        position: relative;
        width: 100%;
        padding: 3rem 0;
        margin-top: 2.5rem;  /* 增加顶部边距，避免与卡片重叠 */
        margin-bottom: 2rem;
        border-radius: 14px;
        z-index: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    }
    
    html[data-theme='dark'] .hero-section {
        box-shadow: 20px 20px 60px #111, -20px -20px 60px #333;
    }
    
    /* 在线用户显示样式 */
    .online-users {
        margin-top: 1rem;
        padding: 0.3rem 0.8rem;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    html[data-theme='dark'] .online-users {
        background-color: rgba(0, 0, 0, 0.2);
        color: rgba(255, 255, 255, 0.8);
    }
    
    .online-users .fa-user {
        color: #3498db;
    }
    
    html[data-theme='dark'] .online-users .fa-user {
        color: #61dafb;
    }
    
    .online-count {
        font-weight: bold;
        transition: transform 0.3s ease, color 0.3s ease;
    }
    
    /* 用户数量变化动画 */
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }
    
    .count-update {
        animation: pulse 0.8s ease;
        color: #2ecc71;
    }
    
    html[data-theme='dark'] .count-update {
        color: #2ecc71;
    }
    
    .hero-bg {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        z-index: 2;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(24px);
        border-radius: 10px;
        overflow: hidden;
        outline: 2px solid white;
    }
    
    html[data-theme='dark'] .hero-bg {
        background: rgba(30, 30, 30, .95);
        outline: 2px solid #333;
    }
    
    .hero-blob {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background-color: #3498db; /* 使用网站原有的蓝色 */
        opacity: 1;
        filter: blur(12px);
        animation: blob-bounce 5s infinite ease;
    }
    
    html[data-theme='dark'] .hero-blob {
        background-color: #61dafb; /* 深色模式下的蓝色 */
    }
    
    @keyframes blob-bounce {
        0% {
            transform: translate(-100%, -100%) translate3d(0, 0, 0);
        }
    
        25% {
            transform: translate(-100%, -100%) translate3d(100%, 0, 0);
        }
    
        50% {
            transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
        }
    
        75% {
            transform: translate(-100%, -100%) translate3d(0, 100%, 0);
        }
    
        100% {
            transform: translate(-100%, -100%) translate3d(0, 0, 0);
        }
    }
    
    .hero-content {
        position: relative;
        z-index: 3;
        text-align: center;
    }
    
    .hero-shine {
        font-family: CustomHupoFont, "SimHei", "黑体", "STHupo", "华文琥珀", "Microsoft YaHei", "Noto Serif SC", serif !important;
        font-size: 4rem;
        font-weight: bold;
        letter-spacing: 2px;
        background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;
        background: linear-gradient(to right, #0f0, #00f) 0 0 no-repeat;
        -webkit-background-size: 160px;
        background-size: 160px;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: rgba(0, 0, 0, 0.6);
        color: transparent;
        -webkit-animation: shine 3s infinite;
        animation: shine 3s infinite;
        margin: 0;
        padding: 0;
    }
    
    html[data-theme='dark'] .hero-shine {
        -webkit-text-fill-color: rgba(255, 255, 255, 0.7);
    }
    
    .hero-subtitle {
        color: rgba(0, 0, 0, 0.7);
        margin-top: 1rem;
        font-size: 1.2rem;
        position: relative;
        z-index: 3;
    }
    
    html[data-theme='dark'] .hero-subtitle {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .page-title {
        font-size: 2rem;
        color: var(--text-color);
        margin-bottom: 0.5rem;
        transition: color var(--transition-time);
    }
    .page-subtitle {
        font-size: 1rem;
        color: var(--secondary-color);
        font-weight: normal;
        transition: color var(--transition-time);
    }
    .posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
    }
    .post-card {
        background: var(--card-bg);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease, background-color var(--transition-time), box-shadow var(--transition-time), border 0.3s ease;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 2px solid transparent;
    }
    .post-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        border: 2px solid var(--card-highlight); /* 紫色描边 */
    }
    .post-image {
        width: 100%;
        height: 200px;
        background-color: #f5f5f5;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }
    .post-image-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--placeholder-bg);
        color: white;
        font-size: 2rem;
        transition: background var(--transition-time), transform 0.5s ease;
    }
    .post-image-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease;
    }
    .post-card:hover .post-image-cover,
    .post-card:hover .post-image-placeholder {
        transform: scale(1.05);
    }
    .post-content {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .post-date {
        font-size: 0.8rem;
        color: var(--secondary-color);
        margin-bottom: 0.5rem;
        transition: color var(--transition-time);
    }
    .post-title {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 0.8rem;
        line-height: 1.3;
    }
    .post-title a {
        color: var(--text-color);
        text-decoration: none;
        transition: color var(--transition-time);
    }
    .post-title a:hover {
        color: var(--primary-color);
    }
    .post-excerpt {
        color: var(--secondary-color);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
        flex: 1;
        transition: color var(--transition-time);
    }
    .post-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        font-size: 0.85rem;
    }
    .post-author {
        color: var(--secondary-color);
        transition: color var(--transition-time);
    }
    
    /* 评分样式 */
    .post-rating {
        display: flex;
        align-items: center;
        color: var(--secondary-color);
        font-weight: 500;
        background-color: rgba(255, 199, 58, 0.1);
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        transition: background-color var(--transition-time);
    }
    .post-rating svg {
        margin-right: 0.3rem;
    }
    html[data-theme='dark'] .post-rating {
        background-color: rgba(255, 199, 58, 0.15);
    }
    
    .post-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.8rem;
    }
    .tag {
        display: inline-block;
        background: var(--border-color);
        padding: 0.2rem 0.6rem;
        border-radius: 20px;
        font-size: 0.75rem;
        color: var(--secondary-color);
        transition: background-color var(--transition-time), color var(--transition-time);
    }
    .read-more {
        display: inline-flex;
        align-items: center;
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.85rem;
        transition: color var(--transition-time);
    }
    .read-more:hover {
        text-decoration: underline;
    }
    .read-more-icon {
        margin-left: 0.3rem;
    }
    .no-posts {
        text-align: center;
        padding: 4rem 2rem;
        background: var(--card-bg);
        border-radius: 12px;
        grid-column: 1 / -1;
        transition: background-color var(--transition-time);
    }
    .no-posts-message {
        color: var(--secondary-color);
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        transition: color var(--transition-time);
    }
    .btn-write {
        display: inline-block;
        background: var(--primary-color);
        color: white;
        padding: 0.8rem 1.5rem;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 500;
        transition: background 0.2s;
    }
    .btn-write:hover {
        background: #0069d9;
    }
    
    /* 搜索框样式 */
    .search-container {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }
    .input-container {
        width: 320px;
        position: relative;
    }
    .icon {
        position: absolute;
        right: 10px;
        top: calc(50% + 5px);
        transform: translateY(calc(-50% - 5px));
        color: var(--text-color);
        transition: color var(--transition-time);
    }
    .input {
        width: 100%;
        height: 40px;
        padding: 10px;
        transition: .2s linear;
        border: 2.5px solid var(--text-color);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        background-color: var(--card-bg);
        color: var(--text-color);
    }
    .input:focus {
        outline: none;
        border: 0.5px solid var(--text-color);
        box-shadow: -5px -5px 0px var(--primary-color);
    }
    .input-container:hover > .icon {
        animation: anim 1s linear infinite;
    }
    @keyframes anim {
        0%,
        100% {
            transform: translateY(calc(-50% - 5px)) scale(1);
        }
        50% {
            transform: translateY(calc(-50% - 5px)) scale(1.1);
        }
    }
    
    /* 标签过滤器样式 */
    .tag-filter-container {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        position: relative; /* 确保相对定位 */
    }
    
    .selectMultiple {
        width: 320px;
        position: relative;
    }
    
    .selectMultiple select {
        display: none;
    }
    
    .selectMultiple > div {
        position: relative;
        z-index: 2;
        padding: 8px 12px 2px 12px;
        border-radius: 8px;
        background: var(--card-bg);
        font-size: 14px;
        min-height: 44px;
        box-shadow: 0 4px 16px 0 rgba(22, 42, 90, 0.12);
        transition: box-shadow 0.3s ease;
        cursor: pointer; /* 添加指针样式 */
    }
    
    .selectMultiple > div:hover {
        box-shadow: 0 4px 24px -1px rgba(22, 42, 90, 0.16);
    }
    
    .selectMultiple > div .arrow {
        right: 1px;
        top: 0;
        bottom: 0;
        cursor: pointer;
        width: 28px;
        position: absolute;
    }
    
    .selectMultiple > div .arrow:before,
    .selectMultiple > div .arrow:after {
        content: '';
        position: absolute;
        display: block;
        width: 2px;
        height: 8px;
        border-bottom: 8px solid var(--secondary-color);
        top: 43%;
        transition: all 0.3s ease;
    }
    
    .selectMultiple > div .arrow:before {
        right: 12px;
        transform: rotate(-130deg);
    }
    
    .selectMultiple > div .arrow:after {
        left: 9px;
        transform: rotate(130deg);
    }
    
    .selectMultiple > div span {
        color: var(--secondary-color);
        display: block;
        position: absolute;
        left: 12px;
        cursor: pointer;
        top: 8px;
        line-height: 28px;
        transition: all 0.3s ease;
    }
    
    .selectMultiple > div span.hide {
        opacity: 0;
        visibility: hidden;
        transform: translate(-4px, 0);
    }
    
    .selectMultiple > div a {
        position: relative;
        padding: 0 24px 6px 8px;
        line-height: 28px;
        color: var(--text-color);
        display: inline-block;
        vertical-align: top;
        margin: 0 6px 0 0;
    }
    
    .selectMultiple > div a em {
        font-style: normal;
        display: block;
        white-space: nowrap;
    }
    
    .selectMultiple > div a:before {
        content: '';
        left: 0;
        top: 0;
        bottom: 6px;
        width: 100%;
        position: absolute;
        display: block;
        background: rgba(228, 236, 250, 0.7);
        z-index: -1;
        border-radius: 4px;
    }
    
    html[data-theme='dark'] .selectMultiple > div a:before {
        background: rgba(70, 80, 100, 0.7);
    }
    
    .selectMultiple > div a i {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 28px;
        display: block;
    }
    
    .selectMultiple > div a i:before,
    .selectMultiple > div a i:after {
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        background: var(--primary-color);
        border-radius: 1px;
    }
    
    .selectMultiple > div a i:before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .selectMultiple > div a i:after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    .selectMultiple > div a.notShown {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .selectMultiple > div a.notShown:before {
        width: 28px;
        transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
    }
    
    .selectMultiple > div a.notShown i {
        opacity: 0;
        transition: all 0.3s ease 0.3s;
    }
    
    .selectMultiple > div a.notShown em {
        opacity: 0;
        transform: translate(-6px, 0);
        transition: all 0.4s ease 0.3s;
    }
    
    .selectMultiple > div a.notShown.shown {
        opacity: 1;
    }
    
    .selectMultiple > div a.notShown.shown:before {
        width: 100%;
    }
    
    .selectMultiple > div a.notShown.shown i {
        opacity: 1;
    }
    
    .selectMultiple > div a.notShown.shown em {
        opacity: 1;
        transform: translate(0, 0);
    }
    
    .selectMultiple > div a.remove:before {
        width: 28px;
        transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
    }
    
    .selectMultiple > div a.remove i {
        opacity: 0;
        transition: all 0.3s ease 0s;
    }
    
    .selectMultiple > div a.remove em {
        opacity: 0;
        transform: translate(-12px, 0);
        transition: all 0.4s ease 0s;
    }
    
    .selectMultiple > div a.remove.disappear {
        opacity: 0;
        transition: opacity 0.5s ease 0s;
    }
    
    .selectMultiple > ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 16px;
        z-index: 9999; /* 非常高的z-index值确保显示在最上层 */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        border-radius: 8px;
        transform: translate(0, 20px) scale(0.8);
        transform-origin: 0 0;
        filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
        transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s;
        background: var(--card-bg); /* 确保有背景色 */
        overflow: hidden; /* 添加溢出隐藏 */
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* 增加阴影 */
    }
    
    .selectMultiple > ul li {
        color: var(--text-color);
        background: var(--card-bg);
        padding: 12px 16px;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease 0.3s, opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s;
    }
    
    .selectMultiple > ul li:first-child {
        border-radius: 8px 8px 0 0;
    }
    
    .selectMultiple > ul li:first-child:last-child {
        border-radius: 8px;
    }
    
    .selectMultiple > ul li:last-child {
        border-radius: 0 0 8px 8px;
    }
    
    .selectMultiple > ul li:last-child:first-child {
        border-radius: 8px;
    }
    
    .selectMultiple > ul li:hover {
        background: var(--primary-color);
        color: #fff;
    }
    
    .selectMultiple > ul li:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6px;
        height: 6px;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }
    
    .selectMultiple > ul li.beforeRemove {
        border-radius: 0 0 8px 8px;
    }
    
    .selectMultiple > ul li.beforeRemove:first-child {
        border-radius: 8px;
    }
    
    .selectMultiple > ul li.afterRemove {
        border-radius: 8px 8px 0 0;
    }
    
    .selectMultiple > ul li.afterRemove:last-child {
        border-radius: 8px;
    }
    
    .selectMultiple > ul li.remove {
        transform: scale(0);
        opacity: 0;
    }
    
    .selectMultiple > ul li.remove:after {
        animation: ripple 0.4s ease-out;
    }
    
    .selectMultiple > ul li.notShown {
        display: none;
        transform: scale(0);
        opacity: 0;
        transition: transform 0.35s ease, opacity 0.4s ease;
    }
    
    .selectMultiple > ul li.notShown.show {
        transform: scale(1);
        opacity: 1;
    }
    
    .selectMultiple.open > div {
        box-shadow: 0 4px 20px -1px rgba(22, 42, 90, 0.12);
    }
    
    .selectMultiple.open > div .arrow:before {
        transform: rotate(-50deg);
    }
    
    .selectMultiple.open > div .arrow:after {
        transform: rotate(50deg);
    }
    
    .selectMultiple.open > ul {
        transform: translate(0, 12px) scale(1);
        opacity: 1;
        visibility: visible;
        filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16));
    }
    
    @keyframes ripple {
        0% {
            transform: scale(0, 0);
            opacity: 1;
        }
        25% {
            transform: scale(30, 30);
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(50, 50);
        }
    }
    
    .search-results {
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
        color: var(--secondary-color);
        transition: color var(--transition-time);
    }

    @media (max-width: 1400px) {
        .visitor-stats-card {
            /* 不再需要调整定位方式，保持绝对定位 */
        }
        
        .visitor-stats-card:hover {
            transform: scale(1.1); /* 保持一致的悬浮效果 */
        }
    }

    /* 移动设备上的响应式调整 */
    @media (max-width: 768px) {
        .posts-grid {
            grid-template-columns: 1fr;
        }
        .input-container {
            width: 100%;
        }
        .visitor-stats-card {
            /* 保持绝对定位，仅调整大小和间距 */
            width: 90px;  /* 小屏幕上更小一点 */
            height: 90px;
            font-size: 12px;
            left: -0.5rem;  /* 移动设备上也向左移，但幅度小一些 */
            top: 0.5rem;
        }
        
        .first-content .stat-number {
            font-size: 1.6rem;  /* 调整字体大小 */
            margin-bottom: 0.2rem;
        }
        
        .first-content .stat-label {
            font-size: 0.8rem;
        }
        
        .hero-section {
            margin-top: 5rem;  /* 增加顶部边距，确保不与卡片重叠 */
            margin-bottom: 1rem;
            padding: 2rem 0;  /* 减小内边距 */
        }
        
        .hero-shine {
            font-size: 3rem;  /* 减小标题大小 */
        }
        
        .hero-subtitle {
            font-size: 1rem;
        }
    }

    /* 小屏幕的特别处理 */
    @media (max-width: 992px) {
        .visitor-stats-card {
            /* 保持绝对定位 */
        }
    }

    /* 卡片封面样式 */
    .card-cover {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .post-card:hover .card-cover img {
        transform: scale(1.05);
    }

    /* 深色模式下的文字颜色 */
    html[data-theme='dark'] .first-content .stat-number,
    html[data-theme='dark'] .second-content .stat-number {
        color: #fff;
    }
    
    html[data-theme='dark'] .first-content .stat-label,
    html[data-theme='dark'] .second-content .stat-label {
        color: #ddd;
    }
    
    /* 返回顶部按钮样式 */
    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease, border-radius 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 99;
        overflow: hidden;
    }
    
    .back-to-top.show {
        opacity: 1;
        visibility: visible;
    }
    
    .back-to-top:hover {
        border-radius: 10px;
        width: 100px;
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }
    
    .back-to-top .rocket-icon {
        width: 24px;
        height: 24px;
        position: relative;
        z-index: 2;
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    
    .back-to-top:hover .rocket-icon {
        transform: translateY(-8px) scale(1.2);
    }
    
    .back-to-top .rocket-text {
        position: absolute;
        font-size: 14px;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(20px);
        white-space: nowrap;
        text-align: center;
    }
    
    .back-to-top:hover .rocket-text {
        opacity: 1;
        transform: translateY(12px);
    }
    
    .back-to-top .rocket-icon svg {
        fill: #fff;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
    }
    
    .back-to-top:hover .rocket-icon svg {
        fill: #fff;
    }
    
    .back-to-top .fire {
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ff5722;
        filter: blur(2px);
        z-index: 1;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .back-to-top .fire:before,
    .back-to-top .fire:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff9800;
        filter: blur(2px);
    }
    
    .back-to-top .fire:before {
        left: -4px;
        top: 2px;
    }
    
    .back-to-top .fire:after {
        right: -4px;
        top: 2px;
    }
    
    .back-to-top.rocket-launch {
        background-color: var(--primary-color);
    }
    
    .back-to-top.rocket-launch .rocket-icon {
        transform: translateY(-80px) scale(1.2) !important; /* 增加优先级确保动画生效 */
        animation: wobble 0.5s ease-in-out !important;
    }
    
    .back-to-top.rocket-launch .rocket-text {
        opacity: 0;
    }
    
    .back-to-top.rocket-launch .fire {
        opacity: 1 !important;
        animation: flame 0.8s ease-out infinite !important;
    }
    
    @keyframes flame {
        0% {
            transform: translateX(-50%) scale(0.5);
            opacity: 0.5;
        }
        50% {
            transform: translateX(-50%) scale(1.5);
            opacity: 1;
        }
        100% {
            transform: translateX(-50%) scale(0.5);
            opacity: 0.5;
        }
    }
    
    @keyframes wobble {
        0%, 100% {
            transform: translateY(-80px) scale(1.2) rotate(0deg);
        }
        25% {
            transform: translateY(-80px) scale(1.2) rotate(-5deg);
        }
        50% {
            transform: translateY(-80px) scale(1.2) rotate(0deg);
        }
        75% {
            transform: translateY(-80px) scale(1.2) rotate(5deg);
        }
    }
    
    /* 进度条样式 */
    .progress-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    
    .progress-circle {
        width: 54px;
        height: 54px;
        transform: rotate(-90deg);
        stroke-width: 3;
    }
    
    .progress-bg {
        fill: none;
        stroke: rgba(255, 255, 255, 0.2);
    }
    
    .progress-bar {
        fill: none;
        stroke: #ffffff;
        stroke-dasharray: 150.76; /* 圆的周长：2πr，其中r=24 */
        stroke-dashoffset: 150.76; /* 初始状态完全不显示 */
        transition: stroke-dashoffset 0.3s linear;
    }
    
    @media (max-width: 768px) {
        .back-to-top {
            width: 40px;
            height: 40px;
            bottom: 20px;
            right: 20px;
        }
        
        .back-to-top .rocket-icon {
            width: 20px;
            height: 20px;
        }
        
        .progress-circle {
            width: 44px;
            height: 44px;
        }
    }

    /* 待办事项侧边栏样式 */
    .todo-sidebar {
        position: fixed;
        top: 0;
        right: -320px; /* 默认隐藏在右侧 */
        width: 320px;
        height: 100vh;
        background-color: var(--card-bg);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    
    .todo-sidebar.active {
        right: 0; /* 展开状态 */
    }
    
    .todo-toggle-btn {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 5px 0 0 5px;
        padding: 15px 10px;
        cursor: pointer;
        z-index: 999;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
    }
    
    .todo-toggle-btn:hover {
        background-color: var(--accent-color);
    }
    
    .todo-toggle-btn i {
        font-size: 1.2rem;
    }
    
    .todo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 10px;
    }
    
    .todo-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--text-color);
    }
    
    .todo-close-btn {
        background: none;
        border: none;
        color: var(--secondary-color);
        font-size: 1.5rem;
        cursor: pointer;
        transition: color 0.3s;
    }
    
    .todo-close-btn:hover {
        color: var(--accent-color);
    }
    
    .todo-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .todo-section {
        margin-bottom: 20px;
    }
    
    /* 待办事项新样式 */
    #todo-checklist {
        --background: var(--card-bg);
        --text: var(--text-color);
        --check: #4f29f0;
        --disabled: #c3c8de;
        --border-radius: 10px;
        background: var(--background);
        width: 100%;
        border-radius: var(--border-radius);
        position: relative;
        box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
        padding: 15px;
        display: grid;
        grid-template-columns: auto;
    }
    
    #todo-checklist .todo-item {
        display: grid;
        grid-template-columns: 30px auto;
        align-items: center;
        margin-bottom: 12px;
        background: transparent;
        box-shadow: none;
        border-left: none;
        padding: 8px 5px;
    }

    #todo-checklist .todo-checkbox-container {
        padding: 0;
    }

    #todo-checklist label {
        color: var(--text);
        position: relative;
        cursor: pointer;
        display: grid;
        align-items: center;
        width: fit-content;
        transition: color 0.3s ease;
        margin-right: 0;
        padding-left: 10px;
    }

    #todo-checklist label::before, #todo-checklist label::after {
        content: "";
        position: absolute;
    }

    #todo-checklist label::before {
        height: 2px;
        width: 8px;
        left: -27px;
        background: var(--check);
        border-radius: 2px;
        transition: background 0.3s ease;
        opacity: 0;
    }

    #todo-checklist label:after {
        height: 4px;
        width: 4px;
        top: 8px;
        left: -25px;
        border-radius: 50%;
    }

    #todo-checklist input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        height: 15px;
        width: 15px;
        outline: none;
        border: 0;
        margin: 0;
        cursor: pointer;
        background: var(--background);
        display: grid;
        align-items: center;
    }

    #todo-checklist input[type="checkbox"]::before, 
    #todo-checklist input[type="checkbox"]::after {
        content: "";
        position: absolute;
        height: 2px;
        top: auto;
        background: var(--check);
        border-radius: 2px;
    }

    #todo-checklist input[type="checkbox"]::before {
        width: 0px;
        right: 60%;
        transform-origin: right bottom;
    }

    #todo-checklist input[type="checkbox"]::after {
        width: 0px;
        left: 40%;
        transform-origin: left bottom;
    }

    #todo-checklist input[type="checkbox"]:checked::before {
        animation: check-01 0.4s ease forwards;
    }

    #todo-checklist input[type="checkbox"]:checked::after {
        animation: check-02 0.4s ease forwards;
    }

    #todo-checklist input[type="checkbox"]:checked + .todo-content .todo-title {
        color: var(--disabled);
        animation: move 0.3s ease 0.1s forwards;
    }

    #todo-checklist input[type="checkbox"]:checked + .todo-content .todo-title::before {
        background: var(--disabled);
        animation: slice 0.4s ease forwards;
    }

    #todo-checklist input[type="checkbox"]:checked + .todo-content .todo-title::after {
        animation: firework 0.5s ease forwards 0.1s;
    }

    #todo-checklist .todo-meta {
        display: none;
    }

    #todo-checklist .todo-title {
        position: relative;
    }

    #todo-checklist .todo-title::before {
        content: "";
        position: absolute;
        height: 2px;
        width: 0%;
        left: 0;
        bottom: 0;
        background: var(--check);
        border-radius: 2px;
        transition: width 0.3s ease;
    }
    
    /* 添加划掉完成任务的样式 */
    #todo-checklist input[type="checkbox"]:checked + .todo-content .todo-title {
        text-decoration: line-through;
        opacity: 0.7;
    }
    
    @keyframes move {
        50% {
            padding-left: 8px;
            padding-right: 0px;
        }

        100% {
            padding-right: 4px;
        }
    }

    @keyframes slice {
        60% {
            width: 100%;
            left: 4px;
        }

        100% {
            width: 100%;
            left: -2px;
            padding-left: 0;
        }
    }

    @keyframes check-01 {
        0% {
            width: 4px;
            top: auto;
            transform: rotate(0);
        }

        50% {
            width: 0px;
            top: auto;
            transform: rotate(0);
        }

        51% {
            width: 0px;
            top: 8px;
            transform: rotate(45deg);
        }

        100% {
            width: 5px;
            top: 8px;
            transform: rotate(45deg);
        }
    }

    @keyframes check-02 {
        0% {
            width: 4px;
            top: auto;
            transform: rotate(0);
        }

        50% {
            width: 0px;
            top: auto;
            transform: rotate(0);
        }

        51% {
            width: 0px;
            top: 8px;
            transform: rotate(-45deg);
        }

        100% {
            width: 10px;
            top: 8px;
            transform: rotate(-45deg);
        }
    }

    @keyframes firework {
        0% {
            opacity: 1;
            box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
        }

        30% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
        }
    }
    
    .todo-empty {
        text-align: center;
        color: var(--secondary-color);
        padding: 15px;
        font-style: italic;
    }
    
    /* 随手记模块样式 */
    .notes-section {
        margin-top: 30px;
        border-top: 1px solid var(--border-color);
        padding-top: 20px;
    }
    
    .notes-title {
        font-size: 1.1rem;
        font-weight: bold;
        color: var(--text-color);
        margin-bottom: 15px;
    }
    
    .note-form {
        margin-bottom: 15px;
    }
    
    /* 新的输入框样式 */
    .note-form .input-container {
        position: relative;
        margin-bottom: 20px;
    }
    
    .note-form .input {
        width: 100%;
        padding: 10px;
        height: auto;
        border: 2px solid #0B2447;
        border-top: none;
        border-bottom: none;
        font-size: 16px;
        background: transparent;
        outline: none;
        box-shadow: 7px 7px 0px 0px #0B2447;
        transition: all 0.5s;
        color: var(--text-color);
    }
    
    .note-form textarea.input {
        min-height: 80px;
        resize: vertical;
    }
    
    .note-form .input:focus {
        box-shadow: none;
        transition: all 0.5s;
    }
    
    .note-form .label {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #0B2447;
        transition: all 0.5s;
        transform: scale(0);
        z-index: -1;
    }
    
    .note-form .input-container .topline {
        position: absolute;
        content: "";
        background-color: #0B2447;
        width: 0%;
        height: 2px;
        right: 0;
        top: 0;
        transition: all 0.5s;
    }
    
    .note-form .input-container input[type="text"]:focus ~ .topline,
    .note-form .input-container textarea:focus ~ .topline {
        width: 35%;
        transition: all 0.5s;
    }
    
    .note-form .input-container .underline {
        position: absolute;
        content: "";
        background-color: #0B2447;
        width: 0%;
        height: 2px;
        right: 0;
        bottom: 0;
        transition: all 0.5s;
    }
    
    .note-form .input-container input[type="text"]:focus ~ .underline,
    .note-form .input-container textarea:focus ~ .underline {
        width: 100%;
        transition: all 0.5s;
    }
    
    .note-form .input-container input[type="text"]:focus ~ .label,
    .note-form .input-container textarea:focus ~ .label {
        top: -20px;
        transform: scale(1);
        transition: all 0.5s;
    }
    
    /* 适配深色模式 */
    html[data-theme='dark'] .note-form .input {
        border-color: #3a86ff;
        box-shadow: 7px 7px 0px 0px #3a86ff;
    }
    
    html[data-theme='dark'] .note-form .label {
        color: #3a86ff;
    }
    
    html[data-theme='dark'] .note-form .input-container .topline,
    html[data-theme='dark'] .note-form .input-container .underline {
        background-color: #3a86ff;
    }
    
    .note-form button {
        background-color: #0B2447;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 0;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s;
        box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2);
    }
    
    .note-form button:hover {
        background-color: #173b76;
        transform: translate(2px, 2px);
        box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.2);
    }
    
    html[data-theme='dark'] .note-form button {
        background-color: #3a86ff;
    }
    
    html[data-theme='dark'] .note-form button:hover {
        background-color: #2a75ee;
    }
    
    .notes-list {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .note-item {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
        position: relative;
    }
    
    .note-content {
        margin-bottom: 5px;
        word-break: break-word;
        color: var(--text-color);
    }
    
    .note-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        color: var(--secondary-color);
    }
    
    .note-location {
        font-style: italic;
    }
    
    .note-time {
        text-align: right;
    }
    
    .note-delete {
        position: absolute;
        top: 5px;
        right: 5px;
        background: none;
        border: none;
        font-size: 0.8rem;
        color: var(--secondary-color);
        cursor: pointer;
        transition: color 0.3s;
    }
    
    .note-delete:hover {
        color: #ff6b6b;
    }
    
    .notes-empty {
        text-align: center;
        color: var(--secondary-color);
        padding: 15px;
        font-style: italic;
    }

    /* 标签选择器样式 */
</style>
{% endblock %}

{% block content %}
<div class="page-container">
    <!-- 返回顶部按钮 -->
    <div class="back-to-top" id="backToTop">
        <div class="progress-container">
            <svg class="progress-circle" viewBox="0 0 54 54">
                <circle class="progress-bg" cx="27" cy="27" r="24"></circle>
                <circle class="progress-bar" cx="27" cy="27" r="24" id="progressBar"></circle>
            </svg>
        </div>
        <div class="rocket-icon">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53Z"></path>
            </svg>
        </div>
        <div class="rocket-text">TOP</div>
        <div class="fire"></div>
    </div>
    
    <!-- 访问量卡片 -->
    <div class="visitor-stats-card">
        <div class="first-content">
            <div class="stat-number">{{ today_visits }}</div>
            <div class="stat-label">今日访问</div>
        </div>
        <div class="second-content">
            <div class="stat-number">{{ total_visits }}</div>
            <div class="stat-label">总访问量</div>
        </div>
    </div>
    
    <!-- 待办事项折叠侧边栏 -->
    <button class="todo-toggle-btn" id="todoToggleBtn">
        <i class="fa fa-tasks"></i>
    </button>
    
    <div class="todo-sidebar" id="todoSidebar">
        <div class="todo-header">
            <div class="todo-title">今日待办事项</div>
            <button class="todo-close-btn" id="todoCloseBtn">&times;</button>
        </div>
        <div id="todo-checklist">
            <!-- 任务列表将通过JavaScript动态加载 -->
        </div>
        
        <!-- 随手记模块 -->
        <div class="notes-section">
            <div class="notes-title">随手记</div>
            
            <div class="note-form">
                <div class="input-container">
                    <textarea id="noteContent" class="input" type="text"></textarea>
                    <label class="label" for="noteContent">记录当前在做什么...</label>
                    <div class="topline"></div>
                    <div class="underline"></div>
                </div>
                
                <div class="input-container" style="margin-top: 20px;">
                    <input id="noteLocation" class="input" type="text">
                    <label class="label" for="noteLocation">地点（可选）</label>
                    <div class="topline"></div>
                    <div class="underline"></div>
                </div>
                
                <button id="addNoteBtn">保存记录</button>
            </div>
            
            <div class="notes-list" id="notes-list">
                <!-- 随手记列表将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
    
    <!-- 英雄区域 -->
    <div class="hero-section">
        <div class="hero-blob"></div>
        <div class="hero-bg"></div>
        <div class="hero-content">
            <p class="hero-shine">云水禅心居</p>
            <p class="hero-subtitle">记录生活，分享感悟</p>
            <div class="online-users">
                <i class="fa fa-user" aria-hidden="true"></i>
                <span class="online-count">{{ session.get('active_users', 1) }}</span>
            </div>
        </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-container">
        <div class="input-container">
            <form action="{{ url_for('search') }}" method="GET">
                <input type="text" name="q" class="input" placeholder="搜索文章..." value="{{ search_query or request.args.get('q', '') }}">
                <i class="fa fa-search icon"></i>
            </form>
        </div>
    </div>

    <!-- 标签过滤器 -->
    <div class="tag-filter-container">
        <div class="selectMultiple">
            <select multiple id="tagFilter">
                {% if tags %}
                    {% for tag in tags %}
                        <option value="{{ tag.name }}">{{ tag.name }}</option>
                    {% endfor %}
                {% else %}
                    <!-- 如果没有标签，添加一些占位标签用于测试 -->
                    <option value="测试">测试</option>
                    <option value="Python">Python</option>
                    <option value="JavaScript">JavaScript</option>
                    <option value="生活">生活</option>
                    <option value="技术">技术</option>
                {% endif %}
            </select>
            <div>
                <span>选择标签对文章进行过滤~</span>
                <div class="arrow"></div>
            </div>
            <ul></ul>
        </div>
    </div>
    
    <!-- 搜索结果提示 -->
    {% if search_query %}
        <div class="search-results">
            搜索: "{{ search_query }}" 的结果
        </div>
    {% endif %}

    <div class="posts-grid">
        {% if posts %}
            {% for post in posts %}
                <div class="post-card">
                    <div class="post-image">
                        <div class="card-cover">
                            {% if post.cover_image %}
                            <img class="lazy" src="{{ url_for('placeholder', width=400, height=225) }}" data-src="{{ url_for('static', filename=post.cover_image) }}" alt="{{ post.title }}">
                            {% else %}
                            <img class="lazy" src="{{ url_for('placeholder', width=400, height=225) }}" data-src="{{ url_for('static', filename='img/default-cover.jpg') }}" alt="默认封面">
                            {% endif %}
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-date">{{ post.created_at.strftime('%Y-%m-%d') }}</div>
                        <h2 class="post-title">
                            <a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a>
                        </h2>
                        <div class="post-excerpt">{{ post.text_excerpt }}</div>
                        <div class="post-meta">
                            <span class="post-author">{{ post.author.username }}</span>
                            {% if post.rating_count > 0 %}
                            <span class="post-rating">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:1rem;height:1rem;fill:#ffc73a;vertical-align:middle;">
                                    <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path>
                                </svg>
                                {{ post.average_rating|round(1) }} / 5 ({{ post.rating_count }})
                            </span>
                            {% endif %}
                        </div>
                        {% if post.tags %}
                            <div class="post-tags">
                                {% for tag in post.tags %}
                                    <span class="tag">{{ tag.name }}</span>
                                {% endfor %}
                            </div>
                        {% endif %}
                        <a href="{{ url_for('post', post_id=post.id) }}" class="read-more">
                            阅读更多 <span class="read-more-icon">→</span>
                        </a>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="no-posts">
                <p class="no-posts-message">还没有任何文章。开始写作吧！</p>
                {% if current_user.is_authenticated %}
                    <a href="{{ url_for('write_post') }}" class="btn-write">写文章</a>
                {% else %}
                    <a href="{{ url_for('login') }}" class="btn-write">登录后写文章</a>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 全局定义toggleTaskStatus函数
    function toggleTaskStatus(taskId, isCompleted) {
        fetch(`/api/tasks/${taskId}/toggle`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ completed: isCompleted })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 状态已在checkbox中更新，无需额外处理
                console.log(`任务 ${taskId} 状态已更新为: ${isCompleted ? '已完成' : '未完成'}`);
            } else {
                alert(data.message || '操作失败');
                // 恢复复选框状态
                const checkbox = document.querySelector(`input[id="task-${taskId}"]`);
                if (checkbox) {
                    checkbox.checked = !isCompleted;
                }
            }
        })
        .catch(error => {
            console.error('更新任务状态失败:', error);
            alert('操作失败，请重试');
            // 恢复复选框状态
            const checkbox = document.querySelector(`input[id="task-${taskId}"]`);
            if (checkbox) {
                checkbox.checked = !isCompleted;
            }
        });
    }

    // 全局定义addNote函数
    function addNote() {
        const contentEl = document.getElementById('noteContent');
        const locationEl = document.getElementById('noteLocation');
        
        if (!contentEl || !locationEl) {
            console.error('找不到随手记表单元素');
            return;
        }
        
        const content = contentEl.value.trim();
        const location = locationEl.value.trim();
        
        if (!content) {
            alert('请输入记录内容');
            return;
        }
        
        const formData = new FormData();
        formData.append('content', content);
        formData.append('location', location);
        
        fetch('/api/notes/add', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('随手记保存成功:', data);
                // 清空表单
                contentEl.value = '';
                locationEl.value = '';
                
                // 重新加载随手记列表
                loadNotes();
                
                // 发送事件通知，以便其他页面可以更新
                if (window.localStorage) {
                    // 存储更新事件和时间戳
                    window.localStorage.setItem('noteUpdated', Date.now());
                }
            } else {
                console.error('保存失败:', data.message);
                alert(data.message || '添加失败');
            }
        })
        .catch(error => {
            console.error('添加随手记失败:', error);
            alert('添加失败，请重试');
        });
    }

    // 全局定义deleteNote函数
    function deleteNote(noteId) {
        if (!confirm('确定要删除这条记录吗？')) {
            return;
        }
        
        fetch(`/api/notes/${noteId}/delete`, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 从DOM中移除该元素
                const noteEl = document.querySelector(`.note-item[data-id="${noteId}"]`);
                if (noteEl) {
                    noteEl.remove();
                }
                
                // 如果没有记录了，显示空提示
                const notesListEl = document.getElementById('notes-list');
                if (notesListEl && (!notesListEl.children.length || notesListEl.children.length === 0)) {
                    notesListEl.innerHTML = '<div class="notes-empty">暂无记录</div>';
                }
                
                // 发送事件通知，以便其他页面可以更新
                if (window.localStorage) {
                    // 存储更新事件和时间戳
                    window.localStorage.setItem('noteUpdated', Date.now());
                }
            } else {
                alert(data.message || '删除失败');
            }
        })
        .catch(error => {
            console.error('删除随手记失败:', error);
            alert('删除失败，请重试');
        });
    }
    
    // 将loadNotes函数移到全局作用域
    function loadNotes() {
        var isAuthenticated = {% if current_user.is_authenticated %}true{% else %}false{% endif %};
        
        if (!isAuthenticated) {
            const notesListEl = document.getElementById('notes-list');
            if (notesListEl) {
                notesListEl.innerHTML = '<div class="notes-empty">请先登录以查看您的随手记</div>';
            }
            return;
        }
        
        console.log('开始加载随手记');
        fetch('/api/notes')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                return response.json();
            })
            .then(data => {
                console.log('随手记数据:', data);
                if (data.success && data.notes) {
                    displayNotes(data.notes);
                } else {
                    throw new Error('数据格式错误');
                }
            })
            .catch(error => {
                console.error('获取随手记失败:', error);
                const notesListEl = document.getElementById('notes-list');
                if (notesListEl) {
                    notesListEl.innerHTML = '<div class="notes-empty">加载失败，请刷新重试</div>';
                }
            });
    }
    
    // 将displayNotes函数移到全局作用域
    function displayNotes(notes) {
        const notesListEl = document.getElementById('notes-list');
        
        if (!notesListEl) {
            console.error('找不到随手记列表容器');
            return;
        }
        
        if (!notes || notes.length === 0) {
            notesListEl.innerHTML = '<div class="notes-empty">暂无记录</div>';
            return;
        }
        
        let html = '';
        notes.forEach(note => {
            html += `
                <div class="note-item" data-id="${note.id}">
                    <button class="note-delete" onclick="deleteNote(${note.id})">×</button>
                    <div class="note-content">${note.content}</div>
                    <div class="note-meta">
                        ${note.location ? `<div class="note-location">📍 ${note.location}</div>` : ''}
                        <div class="note-time">${note.created_at}</div>
                    </div>
                </div>
            `;
        });
        
        notesListEl.innerHTML = html;
    }

    // 全局定义displayTasks函数
    function displayTasks(tasks) {
        const todoListEl = document.getElementById('todo-checklist');
        
        if (!todoListEl) {
            console.error('找不到待办事项列表容器');
            return;
        }
        
        if (!tasks || tasks.length === 0) {
            todoListEl.innerHTML = '<div class="todo-empty">暂无待办事项</div>';
            return;
        }
        
        let html = '';
        tasks.forEach(task => {
            const isCompleted = task.completed ? 'checked' : '';
            
            html += `
                <div class="todo-item" data-id="${task.id}">
                    <input type="checkbox" ${isCompleted} onchange="toggleTaskStatus(${task.id}, this.checked)" id="task-${task.id}">
                    <div class="todo-content">
                        <label for="task-${task.id}" class="todo-title">${task.title}</label>
                    </div>
                </div>
            `;
        });
        
        todoListEl.innerHTML = html;
    }

    document.addEventListener('DOMContentLoaded', function() {
        // 返回顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');
        const progressBar = document.getElementById('progressBar');
        const circumference = 2 * Math.PI * 24; // 圆形进度条的周长
        
        // 设置初始进度条
        if (progressBar) {
            progressBar.style.strokeDasharray = circumference;
            progressBar.style.strokeDashoffset = circumference;
        }
        
        // 滚动事件监听
        window.addEventListener('scroll', function() {
            if (!backToTopBtn) return;
            
            // 当页面滚动超过300px时显示按钮
            if (window.scrollY > 300) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
                backToTopBtn.classList.remove('rocket-launch');
            }
            
            // 更新圆形进度条
            if (progressBar) {
                // 计算滚动百分比
                const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
                const scrollPercentage = window.scrollY / scrollHeight;
                const drawLength = circumference * scrollPercentage;
                
                // 更新进度条
                progressBar.style.strokeDashoffset = circumference - drawLength;
            }
        });
        
        // 点击事件监听
        if (backToTopBtn) {
            backToTopBtn.addEventListener('click', function() {
                backToTopBtn.classList.add('rocket-launch');
                
                // 平滑滚动到顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
        
        // 标签过滤器功能
        const select = document.querySelector('.selectMultiple');
        
        if (select) {
            // 初始化标签过滤器
            initMultipleSelect(select);
        }
        
        // 初始化多选下拉框函数
        function initMultipleSelect(el) {
            const div = el.querySelector('div');
            const span = div.querySelector('span');
            const ul = el.querySelector('ul');
            const options = el.querySelectorAll('option');
            
            // 将选项添加到下拉列表
            options.forEach(option => {
                const li = document.createElement('li');
                li.dataset.value = option.value;
                li.textContent = option.textContent;
                ul.appendChild(li);
            });
            
            // 点击标签过滤器显示/隐藏选项
            div.addEventListener('click', e => {
                el.classList.toggle('open');
                if (el.classList.contains('open')) {
                    // 展开选项列表
                    ul.style.visibility = 'visible';
                    ul.style.opacity = '1';
                    ul.style.transform = 'translate(0, 12px) scale(1)';
                } else {
                    // 隐藏选项列表
                    ul.style.visibility = 'hidden';
                    ul.style.opacity = '0';
                    ul.style.transform = 'translate(0, 20px) scale(0.8)';
                }
            });
            
            // 点击选项选择或取消选择
            ul.addEventListener('click', e => {
                const target = e.target;
                if (target.tagName === 'LI') {
                    const value = target.dataset.value;
                    const selectedValues = Array.from(el.querySelectorAll('div a')).map(a => a.dataset.value);
                    
                    if (selectedValues.includes(value)) {
                        // 取消选择标签
                        const a = el.querySelector(`div a[data-value="${value}"]`);
                        if (a) {
                            a.remove();
                        }
                        
                        // 显示该标签在下拉列表中
                        target.style.display = '';
                    } else {
                        // 选择标签
                        const a = document.createElement('a');
                        a.dataset.value = value;
                        a.innerHTML = `<em>${target.textContent}</em><i></i>`;
                        
                        // 添加关闭按钮事件
                        a.querySelector('i').addEventListener('click', e => {
                            e.stopPropagation();
                            a.remove();
                            
                            // 如果没有选中标签，显示提示文本
                            if (el.querySelectorAll('div a').length === 0) {
                                span.classList.remove('hide');
                            }
                            
                            // 重新显示标签在下拉列表中
                            const listItem = ul.querySelector(`li[data-value="${value}"]`);
                            if (listItem) {
                                listItem.style.display = '';
                            }
                            
                            // 更新过滤后的文章
                            updateFilteredPosts();
                        });
                        
                        div.insertBefore(a, div.querySelector('.arrow'));
                        span.classList.add('hide');
                        
                        // 隐藏该标签在下拉列表中
                        target.style.display = 'none';
                    }
                    
                    // 更新过滤后的文章
                    updateFilteredPosts();
                }
            });
            
            // 点击页面其他区域关闭下拉框
            document.addEventListener('click', e => {
                if (!el.contains(e.target)) {
                    el.classList.remove('open');
                    ul.style.visibility = 'hidden';
                    ul.style.opacity = '0';
                    ul.style.transform = 'translate(0, 20px) scale(0.8)';
                }
            });
        }
        
        // 根据选中的标签过滤文章
        function updateFilteredPosts() {
            const selectedTags = Array.from(document.querySelectorAll('.selectMultiple div a')).map(a => a.dataset.value);
            const postCards = document.querySelectorAll('.post-card');
            
            if (selectedTags.length === 0) {
                // 如果没有选中标签，显示所有文章
                postCards.forEach(card => {
                    card.style.display = '';
                });
                return;
            }
            
            // 遍历所有文章
            postCards.forEach(card => {
                const postTags = Array.from(card.querySelectorAll('.tag')).map(tag => tag.textContent.trim());
                
                // 检查文章是否包含任何一个选中的标签
                const hasSelectedTag = selectedTags.some(tag => postTags.includes(tag));
                
                // 显示或隐藏文章
                card.style.display = hasSelectedTag ? '' : 'none';
            });
            
            // 检查是否所有文章都被隐藏
            const visiblePosts = document.querySelectorAll('.post-card[style="display: none;"]');
            const noPostsContainer = document.querySelector('.no-posts');
            
            if (visiblePosts.length === postCards.length && noPostsContainer) {
                // 所有文章都被隐藏，显示"没有文章"提示
                noPostsContainer.style.display = 'block';
            } else if (noPostsContainer) {
                // 有可见文章，隐藏"没有文章"提示
                noPostsContainer.style.display = 'none';
            }
        }
        
        // 侧边栏切换功能
        const todoToggleBtn = document.getElementById('todoToggleBtn');
        const todoCloseBtn = document.getElementById('todoCloseBtn');
        const todoSidebar = document.getElementById('todoSidebar');
        
        if (todoToggleBtn) {
            todoToggleBtn.addEventListener('click', function() {
                todoSidebar.classList.add('active');
                loadTasks(); // 加载任务数据
                loadNotes(); // 加载随手记数据
            });
        }
        
        if (todoCloseBtn) {
            todoCloseBtn.addEventListener('click', function() {
                todoSidebar.classList.remove('active');
            });
        }
        
        // 添加自动同步功能：页面加载完成时预加载随手记数据，保证数据同步
        var isAuthenticated = {% if current_user.is_authenticated %}true{% else %}false{% endif %};
        if (isAuthenticated) {
            // 预加载随手记数据但不显示，确保数据同步
            console.log('页面加载完成，预加载随手记数据以确保同步');
            fetch('/api/notes')
                .then(response => response.json())
                .catch(error => {
                    console.error('预加载随手记数据失败:', error);
                });
        }
        
        // 点击侧边栏外部区域关闭侧边栏
        document.addEventListener('click', function(event) {
            if (!todoSidebar.contains(event.target) && event.target !== todoToggleBtn) {
                todoSidebar.classList.remove('active');
            }
        });
        
        // 加载任务列表的函数
        function loadTasks() {
            var isAuthenticated = {% if current_user.is_authenticated %}true{% else %}false{% endif %};
            
            if (!isAuthenticated) {
                document.getElementById('todo-checklist').innerHTML = 
                    '<div class="todo-empty">请先登录以查看您的待办事项</div>';
                return;
            }
            
            fetch('/api/tasks')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
                .then(data => {
                    // 过滤只保留今天的任务
                    const today = new Date();
                    const todayString = today.getFullYear() + '-' + 
                                      String(today.getMonth() + 1).padStart(2, '0') + '-' + 
                                      String(today.getDate()).padStart(2, '0');
                    
                    // 过滤任务
                    const todayTasks = data.tasks.filter(task => {
                        // 如果任务有created_at字段，提取日期部分进行比较
                        if (task.created_at) {
                            const taskDate = task.created_at.split(' ')[0]; // 提取日期部分
                            return taskDate === todayString;
                        }
                        return false;
                    });
                    
                    displayTasks(todayTasks);
                })
                .catch(error => {
                    console.error('获取任务失败:', error);
                    document.getElementById('todo-checklist').innerHTML = 
                        '<div class="todo-empty">加载失败，请刷新重试</div>';
                });
        }
        
        // 在线用户数更新
        function updateOnlineUsers() {
            fetch('/api/online_users')
                .then(response => response.json())
                .then(data => {
                    const onlineCount = document.getElementById('onlineCount');
                    if (onlineCount) {
                        const oldCount = parseInt(onlineCount.textContent);
                        const newCount = data.online_users;
                        
                        if (oldCount !== newCount) {
                            onlineCount.textContent = newCount;
                            onlineCount.classList.add('count-update');
                            
                            setTimeout(() => {
                                onlineCount.classList.remove('count-update');
                            }, 800);
                        }
                    }
                })
                .catch(error => {
                    console.error('获取在线用户数失败:', error);
                });
        }
        
        // 每30秒更新一次在线用户数
        setInterval(updateOnlineUsers, 30000);

        // 绑定随手记按钮事件
        const addNoteBtn = document.getElementById('addNoteBtn');
        if (addNoteBtn) {
            addNoteBtn.addEventListener('click', function() {
                console.log('添加随手记按钮被点击');
                addNote();
            });
        } else {
            console.error('找不到添加随手记按钮');
        }
    });
</script>
{% endblock %} 